<template>
  <body>
    <div class="header">
      <div class="mainwarp">
        <div class="logo">
          <a href="index.html"><img src="@/assets/images/log.png" /></a>
        </div>
        <div class="welcome">重置密码</div>
        <div class="headerright">
          <router-link to="/login">个人登录</router-link>
          <span>|</span>
          <router-link to="/Home">返回首页</router-link>
        </div>
      </div>
    </div>
    <div class="passdBox">
      <div class="passpart1">
        <div class="TitleNotice">
          忘记密码了？根据收到的激活码进行验证身份，通过验证后重置密码，您就可以登录了。
        </div>
        <div class="StepsBox">
          <div id="step_div_1" class="Step Active stepfirst">
            <span class="StepNo">1</span>
            <span class="StepName">确认账户</span>
          </div>
          <div id="step_div_2" class="Step">
            <span class="StepNo">2</span>
            <span class="StepName">安全认证</span>
          </div>
          <div id="step_div_3" class="Step">
            <span class="StepNo">3</span>
            <span class="StepName">重置密码</span>
          </div>
          <div id="step_div_4" class="Step steplast">
            <span class="StepNo"></span>
            <span class="StepName">完成</span>
          </div>
        </div>
        <div class="clear"></div>
        <!-- 步骤一 -->
        <div id="step_1" class="restInfo">
          <div class="box1">
            <span>账 户：</span>
            <input
              name=""
              type="text"
              v-model="stepData1.phone"
              placeholder="用户名/邮箱/已验证手机号"
            />
            <div class="clear"></div>
          </div>
          <div class="box1">
            <span>验证码：</span>
            <input
              name=""
              type="text"
              v-model="stepData1.captcha"
              class="yzm"
            />
            <img
              id="verImg"
              :src="img"
              @click="requestCaptcha"
              width="100px"
              height="35px"
            />
            <div class="clear"></div>
          </div>
          <div class="box1">
            <input
              name=""
              type="button"
              step_index="1"
              class="onebtn"
              value="下一步"
            />
          </div>
        </div>
        <!-- 步骤二 -->
        <div id="step_2" class="restInfo" hidden>
          <div class="box2">激活码发送到您的手机：{{ stepData1.phone }}中</div>
          <div class="box1">
            <span>激活码：</span>
            <input
              name=""
              v-model="stepData2.phoneCaptcha"
              type="text"
              class="yzm"
            />
            <el-button
              @click="makeCaptcha"
              color="#ff6f3d"
              style="color: white; font-size: 11px"
              :disabled="isDisabled"
              >获取短信验证码</el-button
            >

            <div class="clear"></div>
          </div>
          <div class="box1">
            <input
              name=""
              type="button"
              step_index="2"
              class="onebtn"
              value="下一步"
            />
          </div>
        </div>
        <!-- 步骤三 -->
        <div id="step_3" class="restInfo" hidden>
          <div class="box2">
            <span class="span1">用户名：</span>

            <span class="span2">{{ username }}</span>

            <div class="clear"></div>
          </div>
          <div class="box1">
            <span>新密码：</span>
            <input name="" v-model="stepData3.password" type="password" />
            <div class="clear"></div>
          </div>
          <div class="box1">
            <span>确认密码： </span>
            <input name="" v-model="pwd" type="password" />
            <div class="clear"></div>
          </div>
          <div class="box1">
            <input
              name=""
              type="button"
              step_index="3"
              class="onebtn"
              value="下一步"
            />
          </div>
        </div>
        <!-- 步骤四 -->
        <div id="step_4" class="restInfo2" hidden>
          <div class="SucTitle">恭喜您，您的密码设置成功！</div>
          <p>您的用户名是：{{ username }}</p>
          <p>
            您可以使用新密码登录蝶飞人才网<router-link to="/login"
              >个人登录</router-link
            >
          </p>
        </div>
      </div>
    </div>
    <div class="clear"></div>
  </body>
</template>


<script setup>
import $ from "jquery";
import { ref, onMounted, reactive } from "vue";
import {
  getCaptcha,
  confirmAccountByPhone,
  SecurityCertifications,
  resetPassword,
  phoneCaptcha,
} from "@/api/user";
import { ElMessage } from "element-plus";
import { ElNotification } from "element-plus";
//jquery 代码
$(function () {
  $(".onebtn").on("click", function () {
    let stepIndex = $(this).attr("step_index");
    let stepId = "#step_" + stepIndex;
    stepIndex++;
    let divNextId = "#step_div_" + stepIndex;
    let stepNextId = "#step_" + stepIndex;

    switch (stepIndex) {
      case 2:
        // 执行步骤1的请求：确认账户
        handleStep1Request()
          .then((res) => {
            ElMessage.success(res.data.message);
            username.value = res.data.data;
            $(stepId).hide();
            $(stepNextId).show();
            $(divNextId).addClass("Active");
          })
          .catch((err) => {
            ElMessage.error(err.data.message);
            stepData1.captcha = "";
            requestCaptcha();
          });
        break;
      case 3:
        // 执行步骤2的请求：安全认证
        handleStep2Request()
          .then((res) => {
            ElMessage.success(res.data.message);
            $(stepId).hide();
            $(stepNextId).show();
            $(divNextId).addClass("Active");
          })
          .catch((err) => {
            ElMessage.error(err.data.message);
          });
        break;
      case 4:
        // 执行步骤3的请求：重置密码
        handleStep3Request()
          .then((res) => {
            if (res.data.code == 1) {
              ElMessage.error(res.data.message);
              return;
            }
            ElMessage.success(res.data.message);
            $(stepId).hide();
            $(stepNextId).show();
            $(divNextId).addClass("Active");
          })
          .catch((err) => {
            ElMessage.error(err.data.message);
          });
        break;

      default:
        console.error("下标越界");
        break;
    }
  });
});
let username = ref("");//用户名
let img = ref("");//图片
//发送验证码请求
const requestCaptcha = function () {
  getCaptcha().then((res) => {
    img.value = res.data.data.image;
    stepData1.token = res.data.data.token;
  });
};
onMounted(() => {
  requestCaptcha();
});

/**
 * 根据步骤条不同页面的请求
 */

//步骤一请求：确认账户
let stepData1 = reactive({
  phone: "15944568367",
  token: "",
  captcha: "",
});

const handleStep1Request = function () {
  return new Promise((resolve, reject) => {
    confirmAccountByPhone(stepData1)
      .then((res) => {
        resolve(res);
      })
      .catch((err) => {
        reject(err);
      });
  });
};
//步骤二请求：安全认证
let stepData2 = reactive({
  phone: "",
  token: "",
  phoneCaptcha: "",
});
//发送回来前按钮禁用
let isDisabled = ref(false);

//生成验证码
const makeCaptcha = function () {
  stepData2.phone = stepData1.phone;
  isDisabled.value = true;
  phoneCaptcha(stepData2).then((res) => {
    setTimeout(() => {
      ElNotification({
        title: "【蝶飞人才】",
        message:
          "尊敬的用户，您好！您的验证码是：" +
          res.data.data.phoneCaptcha +
          "，请在5分钟内完成验证。" +
          "为了您的账户安全，请勿将验证码泄露给他人。感谢您的支持！",
        type: "success",
        duration: 10000,
      });
      isDisabled.value = false;
    }, 3000);
    //token赋给安全认证所需的数据
    stepData2.token = res.data.data.token;
    stepData3.token = res.data.data.token;
  });
};

const handleStep2Request = function () {
  return new Promise((resolve, reject) => {
    SecurityCertifications(stepData2)
      .then((res) => {
        resolve(res);
      })
      .catch((err) => {
        reject(err);
      });
  });
};
//步骤三请求：重置密码
let stepData3 = reactive({
  username: "",
  phone: "",
  password: "",
  token: "",
  phoneCaptcha: "",
});
let pwd = ref("");//用于核对两次密码是否相同
const handleStep3Request = function () {
  stepData3.phone = stepData2.phone
  stepData3.phoneCaptcha = stepData2.phoneCaptcha;
  return new Promise((resolve, reject) => {
    if (stepData3.password != pwd.value) {
      ElMessage.warning("两次密码不一致");
      return;
    }
    stepData3.username = username;
    resetPassword(stepData3)
      .then((res) => {
        resolve(res);
      })
      .catch((err) => {
        reject(err);
      });
  });
};
</script>
<style scoped>
@charset "utf-8";
.span2 {
  font-size: 1.4em; /* 字体大小增大 */
  font-family: "Arial", sans-serif; /* 设置字体 */
  letter-spacing: 1px; /* 字符间距稍微增大 */
  text-align: center; /* 确保文本居中 */
  display: inline-block; /* 使span表现为块级元素来应用居中 */
  padding-left: -20px; /* 微调左边距，使文本向左偏移 */
}

.span1,
.span2 {
  vertical-align: bottom; /* 底部对齐 */
}

/* CSS Document */
* {
  margin: 0;
  padding: 0;
}
ul li {
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  border: 0;
  max-height: 100%;
  max-width: 100%;
}
body {
  width: 100%;
  min-width: 1200px;
  margin: 0 auto;
  font-size: 12px;
  font-family: "微软雅黑";
  color: #222;
  background: #fff4f0;
}
.clear {
  clear: both;
}
input {
  border: 0;
  outline: 0;
}

.header {
  height: 85px;
  width: 100%;
  background: #fff;
  border-bottom: #fee7b1 1px solid;
}
.mainwarp {
  width: 1000px;
  margin: 0 auto;
}
.header .logo {
  float: left;
  margin-top: 20px;
}
.header .welcome {
  float: left;
  margin-top: 20px;
  height: 40px;
  border-left: 1px solid #f4f4f4;
  padding-left: 15px;
  margin-left: 10px;
  line-height: 40px;
  font-size: 22px;
  color: #5c5c5c;
}
.header .headerright {
  float: right;
  font-size: 14px;
  margin-top: 20px;
  padding-top: 15px;
}
.header .headerright a {
  color: #343434;
}
.header .headerright span {
  color: #dadada;
  margin-left: 10px;
  margin-right: 10px;
}

.content {
  width: 1000px;
  margin: 40px auto;
  background: #fff;
  border: 1px #fee7b5 solid;
  margin-top: 50px;
  height: 500px;
  margin-top: 20px;
}

/*忘记密码*/
.passdBox {
  width: 1000px;
  margin: 40px auto;
  background: #fff;
  border: 1px #fee7b5 solid;
  margin-top: 50px;
  padding-bottom: 50px;
}
.passdBox .passpart1 {
  width: 800px;
  margin: 0 auto;
}
.passdBox .passpart1 .TitleNotice {
  font-family: "微软雅黑";
  margin-top: 50px;
  font-size: 16px;
}
.passdBox .passpart1 .StepsBox {
  margin-top: 45px;
  width: 100%;
  height: 6px;
  background: #d9d9d9;
  border-radius: 3px;
}
.passdBox .passpart1 .StepsBox .Step {
  width: 25%;
  text-align: center;
  float: left;
}
.passdBox .passpart1 .StepsBox .Step.Active {
  height: 6px;
  background: #00c61b;
}
.passdBox .passpart1 .StepsBox .Step.stepfirst {
  border-radius: 3px 0px 0px 3px;
}
.passdBox .passpart1 .StepsBox .Step.steplast {
  border-radius: 0px 3px 3px 0px;
}
.passdBox .passpart1 .StepsBox .Step.Active .StepNo {
  background: url(@/assets/images/log17.png) no-repeat;
}
.passdBox .passpart1 .StepsBox .Step.Active .StepName {
  color: #00c61b;
}
.passdBox .passpart1 .StepsBox .Step span {
  margin: 0 auto;
  display: block;
}
.passdBox .passpart1 .StepsBox .Step .StepNo {
  width: 23px;
  background: url(@/assets/images/log18.png) no-repeat;
  height: 23px;
  line-height: 23px;
  top: -8px;
  position: relative;
  color: #fff;
  font-family: Arial;
  font-weight: bold;
  font-size: 14px;
}
.passdBox .passpart1 .StepsBox .Step .StepName {
  color: #aeaeae;
  font-family: "宋体";
}
.passdBox .passpart1 .StepsBox .Step.steplast .StepNo {
  background: url(@/assets/images/log19.png) no-repeat;
}
.passdBox .passpart1 .StepsBox .Step.steplast.Active .StepNo {
  background: url(@/assets/images/log20.png) no-repeat;
}
.passdBox .passpart1 .restInfo {
  font-size: 14px;
  width: 326px;
  margin: 0 auto;
  margin-top: 40px;
}
.passdBox .passpart1 .restInfo .box1 {
  margin-bottom: 20px;
}
.passdBox .passpart1 .restInfo .box1 span {
  display: block;
  float: left;
  line-height: 35px;
  width: 70px;
  text-align: right;
}
.passdBox .passpart1 .restInfo .box1 input {
  display: block;
  float: left;
  padding: 0;
  width: 233px;
  height: 35px;
  border: 1px #dbdbdb solid;
  border-radius: 4px;
  padding-left: 10px;
  line-height: 35px;
  background: none;
  vertical-align: middle;
  padding-right: 10px;
  font-size: 14px;
  color: #9a9a9c;
}
.passdBox .passpart1 .restInfo .box1 input.yzm {
  width: 128px;
  margin-right: 5px;
}
.passdBox .passpart1 .restInfo .box1 input.onebtn {
  height: 37px;
  background: #ff6f3d;
  color: #fff;
  font-size: 16px;
  border: none;
  width: 140px;
  border-radius: 4px;
  cursor: pointer;
  margin: 0 auto;
  float: none;
}
.passdBox .passpart1 .restInfo .box2 {
  padding: 10px 0px;
}
.passdBox .passpart1 .restInfo b.phonenum {
  display: block;
  font-weight: normal;
  float: left;
  width: 88px;
  height: 35px;
  line-height: 35px;
  background: #ffe6d7;
  color: #eb7351;
  border: 1px solid #f3cfb7;
  cursor: pointer;
  border-radius: 4px;
  font-size: 12px;
}
.passdBox .passpart1 .restInfo .box2 span.span1 {
  display: block;
  float: left;
  line-height: 35px;
  width: 70px;
  text-align: right;
}
.passdBox .passpart1 .restInfo .box2 span.span2 {
  display: block;
  float: left;
  width: 233px;
  height: 35px;
  line-height: 35px;
}
.passdBox .passpart1 .restInfo2 {
  padding-top: 70px;
}
.passdBox .passpart1 .restInfo2 .SucTitle {
  font-size: 20px;
  padding-left: 50px;
  margin-left: 230px;
  font-weight: bold;
  background: url(@/assets/images/log21.png) no-repeat;
  height: 42px;
  line-height: 42px;
}
.passdBox .passpart1 .restInfo2 p {
  font-family: "微软雅黑";
  text-align: center;
  font-size: 14px;
  margin-top: 15px;
}
.passdBox .passpart1 .restInfo2 a {
  color: #0f72a4;
  margin-left: 3px;
}
</style>

